{% extends 'base.html' %}

{% block title %}
    {{ object.title }}
{% endblock %}

{% block content %}
    <script>
        // 定义回复按钮点击时调用的函数
        $(document).ready(function () {
            $('#submit_comment').click(function () {

            // 添加防止跨域请求攻击的代码
            $.ajaxSetup(
                {data: {csrfmiddlewaretoken: '{{ csrf_token }}'}}
            );
            var reply = $("#reply").val(); // 将评论目标id存入变量
            var name = $("#name").val();   // 将品论人昵称存入变量
            var email = $("#email").val(); // 将邮件地址存入变量
            var content = $("#content").val();
            // 如果所有的内容有填写了用post方法提交请求
            if (name && email && content){
                $.post('{% url "comment" %}', {
                    // 请求中包含的参数字典
                    'article': {{ object.id }},
                    'reply': reply,
                    'name': name,
                    'email': email,
                    'content': content
                }, function (result) {  // 回调函数获取返回结果
                    if(result === '200'){
                        // 设置提示元素的文字
                        $('#comment_message').removeAttr("hidden").html("评论成功！");
                    }else{
                        $('#comment_message').removeAttr("hidden").css({color: "red"}).html("评论失败");
                    }
                })
            }else{
                $('#comment_message').removeAttr("hidden").html("请检查填写的内容")
            }
        })
    })
    </script>
    <script>
        function reply(comment_name, comment_id) {
            // 设置隐藏元素的值为评论目标的id
            $('#reply').val(comment_id);
            // 设置内容输入框的提示
            $('#content').attr('placeholder', "回复" + comment_name + "的内容：")
        }
    </script>
    <div>
        <h2>{{ object.title }}</h2>
        <p>作者: {{ object.author }}  日期：{{ object.publish_time }}
            类别：<a href="{% url 'category' object.category.id %}">{{ object.category }}</a></p>
{#        过滤器safe能够让文章内容中的html标签生效#}
        {{ object.content | safe }}
    </div>

    <div>
        <h4>标签</h4>
        {% for tag in object.tag.all %}
            {{ tag }}
{#            如果不是循环的最后一项，显示一条竖线#}
            {% if not forloop.last %}
                |
            {% endif %}
        {% endfor %}
    </div>
    <div>
        <h3>评论</h3>
{#        遍历评论数据列表#}
        {% for comment in comments %}
{#             如果没有回复目标#}

            {% if comment.reply == None %}
                {%  if not forloop.first %}
                    </ul>
                {% endif %}
                <ul class="list-group">
                    <li class="list-group-item active">
                        {{ comment.name }}: {{ comment.content }}({{ comment.publish }})
                        <a href="#publish" style="color: white;" onclick="reply('{{ comment.name }}', '{{ comment.id }}')">[回复]</a>
                    </li>

            {% else %}
                <li class="list-group-item">
                    {{ comment.name }} >>> {{ comment.reply.name }}: {{ comment.content }}({{ comment.publish }})
                    <a href="#publish" onclick="reply('{{ comment.name }}', '{{ comment.id }}')">[回复]</a>
                </li>
            {% endif %}
            {% if forloop.last %}
                </ul>
            {% endif %}
        {% endfor %}
    </div>

    <div>
        <h2 id="publish">发表评论</h2>
{#        隐藏元素用于记录回复的目标#}
        <input type="hidden" id="reply" value="0">
{#        class中调用bootstrap中的文本框组件的样式#}
        <div class="input-group">
            <div class="input-group-addon">
                <span class="glyphicon glyphicon-user"></span>
            </div>
            {{ comment_form.name }}
        </div>
        <div class="input-group" style="margin-top: 10px">
            <div class="input-group-addon">
                <span class="glyphicon glyphicon-envelope"></span>
            </div>
            {{ comment_form.email }}
        </div>
        <div class="input-group" style="margin-top: 10px">
            <div class="input-group-addon">
                <span class="glyphicon glyphicon-edit"></span>
            </div>
            {{ comment_form.content }}
        </div>
        <button id="submit_comment" type="button" class="btn btn-primary" style="margin-top: 10px">
            <span class="glyphicon glyphicon-hand-up"></span>回复
        </button>
    <label id="comment_message" hidden style="margin-top: 10px; vertical-align: middle; color: green"></label>
    </div>
{% endblock %}